<template>
  <div>
    <h1>about</h1>
    <div class="card flex justify-center">
      <Button label="首页" @click="toHome" />
      <Test/>
    </div>
    <div class="card" style="width: 80%;margin: 0 auto;">
      <DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
        <Column field="code" header="Code"></Column>
        <Column field="name" header="Name"></Column>
        <Column field="category" header="Category"></Column>
        <Column field="quantity" header="Quantity"></Column>
      </DataTable>
    </div>
    <div class="card" style="width: 80%;margin: 0 auto;">
      <DataTable :value="products" stripedRows tableStyle="min-width: 50rem">
        <Column field="code" header="Code"></Column>
        <Column field="name" header="Name"></Column>
        <Column field="category" header="Category"></Column>
        <Column field="quantity" header="Quantity"></Column>
      </DataTable>
    </div>
<!--    <div class="animate__animated animate__fadeInUp wow">-->
<!--      <p>“眼口不一”规则：</p>-->
<!--      <p>顾名思义，就是看字说出其对应的颜色</p>-->
<!--    </div>-->
<!--    <div class="animate__animated animate__fadeInUp wow">-->
<!--      wowjs Animate.css-->
<!--    </div>-->
<!--    <div class="animate__animated animate__fadeInUp wow">-->
<!--      wowjs Animate.css-->
<!--    </div>-->
<!--    <div class="animate__animated animate__fadeInUp wow">-->
<!--      wowjs Animate.css-->
<!--    </div>-->
<!--    <div class="animate__animated animate__fadeInUp wow">-->
<!--      wowjs Animate.css-->
<!--    </div>-->


    <div ref="chartContainer" style="width: 600px; height: 400px;"></div>
    <div id="main" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
const chartContainer = ref(null);
const chartInstance = ref(null);
onMounted(() => {
  if (chartContainer.value) {
    chartInstance.value = echarts.init(chartContainer.value);
    chartInstance.value.setOption({
      title: {
        text: 'ECharts Example'
      },
      tooltip: {},
      xAxis: {
        data: ['shirt', 'cardigan', 'chiffon skirt', 'pants', 'heels', 'socks']
      },
      yAxis: {},
      series: [{
        name: 'Sales',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    });
  }


  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  option && myChart.setOption(option);
});



const toHome = () => {
  navigateTo('/');
}

if (process.client){
  new WOW().init();
}



const products = ref([{
  "id":1,
  "code":'f230fh0g3',
  "name":'小明',
  "category":'Accessories',
  "quantity":24
},{
  "id":2,
  "code":'f230fh0g3',
  "name":'小明',
  "category":'Accessories',
  "quantity":24
},{
  "id":3,
  "code":'f230fh0g3',
  "name":'小明',
  "category":'Accessories',
  "quantity":24
}]);


/*********************** provide 和 inject 的使用 *********************/
// provide 和inject 是vue提供的一对API 这对API 可以实现组件之间的通信 无论层级有多深 都可以通过这对API 来实现
const location = ref('North Pole')
const geolocation = reactive({
  longitude: 90,
  latitude: 135
})

// 修改provide中值的方法
const updateLocation = () => {
  location.value = 'South Pole'
}

provide('location', location)
provide('geolocation', geolocation)
provide('updateLocation', updateLocation)



</script>

<style scoped>
.wow{
  height: 40rem;
}

</style>
